import React, { Component } from 'react'
import PubSub from 'pubsub-js'
// import axios from 'axios'

export default class Search extends Component {
	 search = async(params) => {
		console.log('search发布消息了')
		//获取用户的输入
		console.log(this.keyWordElement.value)
		//连续解构赋值同时重命名为keyWord（嵌套）
		const { keyWordElement:{value:keyWord}} = this
		//只定义了value未定义keywordElement
		//发送请求前通知list更新状态
		// this.props.updateAppState({
		// 	isFirst:false,isLoading:true
		// })
		PubSub.publish('atguigu1',{
			 	isFirst:false,isLoading:true
			})
		//#region 发送网络请求
		// axios.get(`/api1/search/users?q=${keyWord}`).then(
		// 	response =>{
		// 		// this.props.updateAppState({
		// 		// 	users:response.data.items,
		// 		// 	isLoading:false
		// 		// })
		// 		PubSub.publish('atguigu',{
		// 			users:response.data.items,
		// 			isLoading:false
		// 		})
		// 	},
        //     error =>{
		// 	// this.props.updateAppState({
		// 	// 	isLoading:false,
		// 	// 	err:error.message
		// 	// })
		// 		PubSub.publish('atguigu',{
		// 			isLoading:false,
		// 			err:error.message
		// 		})
		// 	}
		// )
		//#endregion
	
		//#region  fetch（未优化）关注分离思想 ,请求状态 与获取数据是分离的
		// fetch(`/api1/search/users2?q=${keyWord}`).then(
		// 	response =>{
		// 		console.log('联系服务器成功了',response)
		// 		return response.json()
		// 	},
        //     // error =>{
		// 	// 	console.log('联系服务器失败了',error)
		// 	// 	//返回初始化promise实例，可以阻止继续走
		// 	// 	return new Promise(() => {})
		// 	// }
		// ).then(response =>{
		// 	console.log('获取数据成功了',response)
		// 	PubSub.publish('atguigu',{
		// 		users:response.data.items,
		// 		isLoading:false
		// 	})
		// },
		// 	// error =>{
		// 	// 	console.log('获取数据失败了',error)
		// 	// 	PubSub.publish('atguigu',{
		// 	// 		isLoading:false,
		// 	// 		err:error.message
		// 	// 	})
		// 	// }
		// ).catch(
		// 	error=>console.log('获取数据失败了',error)
		// )
		//#endregion

		//#region  fetch（优化）关注分离思想 ,请求状态 与获取数据是分离的
		try {
			const response = await fetch(`/api1/search/users2?q=${keyWord}`)
			const data = await response.json()
			console.log(data)
			PubSub.publish('atguigu1',{
				users:data.items,
				isLoading:false
			})
		} catch (error) {
			PubSub.publish('atguigu1',{
				isLoading:false,
				err:error
			})
			console.log(`请求出错`, error)
		}
		//#endregion
	

	}


	render() {
		return (
			<section className="jumbotron">
				<h3 className="jumbotron-heading">搜索github用户</h3>
				<div>
					<input ref={c=>this.keyWordElement = c} type="text" placeholder="输入关键词点击搜索"/>&nbsp;
					<button onClick={this.search}>搜索</button>
				</div>
			</section>
		)
	}
}
